<template>
	<base-popup
		:modelValue="modelValue"
		:closable="false"
		is-go-back
		@go-back="onClose"
		:title="$t('wallet.transaction.title')"
		contentClass="overflow-y-hidden"
		class="h-[800px]">
		<div class="w-full h-full pt-[30px] bg-bg-1 rounded">
			<n-tabs v-model:value="tab" size="large" justify-content="center" :bar-width="40" animated>
				<n-tab-pane name="Deposit" :tab="$t('wallet.deposit')">
					<div class="flex justify-center gap-2 items-center mb-3">
						<base-date-picker
							:min="minDate"
							v-model="depositTransaction"
							@confirm="onConfirmDeposit"
							@clear="onClearDeposit" />
						<status-select
							modelValue="searchDepositStatus"
							@select="(val) => onConfirmDeposit(val)" />
					</div>
					<div class="h-[590px] overflow-y-auto">
						<base-list-plus
							class="min-h-[300px]"
							:loading="loading"
							:isFinish="isFinish"
							:isEmpty="list.length === 0"
							@load="search"
							@reload="search(true)">
							<div class="px-6 my-2" v-for="(item, index) in list" :key="index">
								<transaction-item :data="item" />
							</div>
						</base-list-plus>
					</div>
				</n-tab-pane>
				<n-tab-pane name="Withdraw" :tab="$t('wallet.withdraw')">
					<div class="flex justify-center gap-2 items-center mb-3">
						<base-date-picker
							:min="minDate"
							v-model="withdrawTransaction"
							@confirm="onConfirmWithdraw"
							@clear="onClearWithdraw" />
						<status-select
							modelValue="searchWithdrawStatus"
							@select="(val) => onConfirmWithdraw(val)" />
					</div>
					<div class="h-[590px] overflow-y-auto">
						<base-list-plus
							class="min-h-[300px]"
							:loading="loading"
							:isFinish="isFinish"
							:isEmpty="list.length === 0"
							@load="search"
							@reload="search(true)">
							<div class="px-6 my-2" v-for="(item, index) in list" :key="index">
								<transaction-item :data="item" />
							</div>
						</base-list-plus>
					</div>
				</n-tab-pane>
			</n-tabs>
		</div>
	</base-popup>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted, watch } from 'vue'
import dayjs from 'dayjs'
import { NTabs, NTabPane } from 'naive-ui'
import { useAccountStore, useWalletStore } from '@/store'
import { BasePopup, BaseListPlus, BaseDatePicker } from '@/components/base'
import TransactionItem from '@/views/wallet/transaction/transaction-item.vue'
import { getTransactions } from '@/api/wallet.ts'
import StatusSelect from '@/views/wallet/transaction/status-select.vue'
import { getItem, setItem } from '@/utils'
import { DEPOSIT_TAB, WALLET_TAB } from '@/constants'
import { useRequest } from '@/hooks'

defineOptions({ name: 'ViewsWalletTransaction' })

const walletStore = useWalletStore()
const accountStore = useAccountStore()

const modelValue = computed(() => walletStore.showPaymentHistory)

const tab = ref(getItem(DEPOSIT_TAB) || 'Deposit')

const minDate = computed(() => {
	const now = new Date()
	return dayjs(new Date(now.getFullYear(), now.getMonth() - 6, now.getDate())).format('DD-MM-YYYY')
})

const withdrawTransaction: any = ref(null)
const depositTransaction: any = ref(null)
const searchDepositStatus = ref(null)
const searchWithdrawStatus = ref(null)

watch(
	() => tab.value,
	(newValue) => {
		setItem(DEPOSIT_TAB, newValue)
		search(true)
	}
)

// const setDepositTransactionsData = async (
// 	currentPage: number,
// 	finish: void | ((...arg1: any[]) => void)
// ) => {
// 	try {
// 		const { data } = await getTransactions({
// 			type: 1,
// 			pageSize: 20,
// 			startdate: depositTransaction.value?.[0],
// 			enddate: depositTransaction.value?.[1],
// 			balanceStatus: searchDepositStatus.value,
// 			page: currentPage
// 		})

// 		finish?.(data.list, data.total)
// 	} catch (err) {
// 		console.log(err)
// 	}
// }

// const setWithdrawTransactionsData = async (
// 	currentPage: number,
// 	finish: void | ((...arg1: any[]) => void)
// ) => {
// 	try {
// 		const { data } = await getTransactions({
// 			type: 2,
// 			pageSize: 20,
// 			startdate: withdrawTransaction.value?.[0],
// 			enddate: withdrawTransaction.value?.[1],
// 			balanceStatus: searchWithdrawStatus.value,
// 			page: currentPage
// 		})
// 		finish?.(data.list, data.total)
// 	} catch (err) {
// 		console.log(err)
// 	}
// }

const { run, loading, list, isFinish } = useRequest(getTransactions, {
	pageSize: 10
})

const search = (refresh = false) => {
	run(
		{
			type: tab.value === 'Deposit' ? 1 : 2,
			startdate: withdrawTransaction.value?.[0],
			enddate: withdrawTransaction.value?.[1],
			balanceStatus: searchWithdrawStatus.value
		},
		{ refresh }
	)
}

const onClose = () => {
	walletStore.setPaymentHistoryShow(false)
	// removeItem(DEPOSIT_TAB)
}

const onConfirmDeposit = (val: any) => {
	searchDepositStatus.value = val
	search(true)
}
const onConfirmWithdraw = (val: any) => {
	searchWithdrawStatus.value = val
	search(true)
}
const onClearDeposit = () => {
	depositTransaction.value = []
	search(true)
}
const onClearWithdraw = () => {
	withdrawTransaction.value = []
	search(true)
}

watch(
	() => walletStore.showPaymentHistory,
	(newValue) => {
		if (newValue) {
			tab.value = getItem(WALLET_TAB) === 1 ? 'Deposit' : 'Withdraw'
		}
	}
)

onMounted(() => {
	if (accountStore.isLogin) {
		// setDepositTransactionsData(1)
		search(true)
	}
})
</script>

<style lang="scss"></style>
